<template>
    <div class="top">
      <el-button style="height: 35px" type="primary"
        ><el-icon size="16"><Plus /></el-icon>新增</el-button
      >
      <input type="text" class="input-search" placeholder="关键字" />
      <select class="select-search">
        <option>-全部状态-</option>
        <option>待执行</option>
        <option>已完成</option>
        <option>结束</option>
        <option>执行中</option>
        <option>已作废</option>
      </select>
      <div class="container">
        <button class="left-button">搜索</button>
        <button class="right-button">
          <el-icon
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              margin-left: 5px;
            "
          >
            <ArrowDown onclick="console.log(123)" />
          </el-icon>
        </button>
      </div>

      <!-- <div class="nav-buttons" @click="search_btn($event)">
        <button class="nav-btn" value="1">我的任务</button>
        <button class="nav-btn" value="2">我未完成任务</button>
        <button class="nav-btn" value="3">我下属任务</button>
        <button class="nav-btn" value="4">我创建任务</button>
        <button class="nav-btn" value="5">我督导任务</button>
      </div> -->
      <div v-if="flag" class="nav-buttons" @click="search_btn($event)">
        <button class="nav-btn" :style="{backgroundColor:currentPath=='/tasks/project_management/executing_projects'?'rgb(214,214,214)':''}" value="/tasks/project_management/executing_projects">我执行项目</button>
        <button class="nav-btn" :style="{backgroundColor:currentPath=='/tasks/project_management/unfinished_projects'?'rgb(214,214,214)':''}" value="/tasks/project_management/unfinished_projects">我未完成项目</button>
        <button class="nav-btn" :style="{backgroundColor:currentPath=='/tasks/project_management/responsible_projects'?'rgb(214,214,214)':''}" value="/tasks/project_management/responsible_projects">我负责项目</button>
        <button class="nav-btn" :style="{backgroundColor:currentPath=='/tasks/project_management/created_projects'?'rgb(214,214,214)':''}" value="/tasks/project_management/created_projects">我创建项目</button>
      </div>
      <div v-else class="nav-buttons" @click="search_btn($event)">
        <button class="nav-btn " :style="{backgroundColor:currentPath=='/tasks/project_management/all_projects'?'rgb(214,214,214)':''}" value="/tasks/project_management/all_projects">所有项目</button>
      </div>
    </div>
</template>

<script lang="ts" setup>
import { Plus, ArrowDown } from "@element-plus/icons-vue";
import { ref, watch } from "vue";
// import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
import {btnValue} from '../../store/task/top'
import router from "../../router";
const store=btnValue()
const flag=store.flag
const currentPath=store.currentPath

// const search_btnvalue=ref('1')
const search_btn = (e:any) => {
    router.push(`/home${e.target.value}`)
    store.a(e.target.value)
    
}


</script>

<style scoped>
.top {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}
/* rgb(204, 204, 204)灰色 */
.input-search {
  padding: 0 5px;
  font-size: 14px;
  margin-left: 10px;
  width: 160px;
  padding: 2px 5px;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 5px;
  transition: all 0.3s ease;
  height: 35px;
}
.input-search:focus {
  border-color: rgb(102, 175, 233); /* 边框颜色变为蓝色 */
  box-shadow: 0 0 5px rgb(102, 175, 233); /* 添加蓝色投影 */
  outline: none; /* 移除默认轮廓 */
}
.select-search {
  width: 150px;
  font-size: 14px;
  height: 35px;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 5px;
  transition: all 0.3s ease;
  padding: 0 5px;
  margin-left: 10px;
}
.select-search:focus {
  border-color: rgb(102, 175, 233);
  box-shadow: 0 0 5px rgb(102, 175, 233);
  outline: none;
}
.container {
  font-size: 14px;
  margin-left: 10px;
  width: 80px;
  height: 35px;
  border-radius: 5px;
  border: 1px solid rgb(204, 204, 204);
  display: flex;
}

.left-button {
  width: 50px;
  border-right: 1px solid rgb(204, 204, 204);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.right-button {
  cursor: pointer;
}
.nav-buttons {
  border: 1px solid rgb(204, 204, 204);
  border-radius: 5px;
  display: flex;
  margin-left: 10px;
}
.nav-buttons button {
  height: 35px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  border-right: 1px solid rgb(204, 204, 204);
  padding: 0 5px;
}

.nav-buttons button:last-child {
  margin-right: 0;
  border-right: 0;
}
.nav-btn:focus {
  background-color: rgb(214,214,214);
}

</style>